<template>
	<view>
		<!-- 地址 -->
		<view class="address-section" @tap="navToAddress">
			<view class="order-content">
				<text class="iconfont icon-dizhi3"></text>
				<view class="cen" >
					<view class="top" v-if="addressData">
						<text class="name">{{addressData.name || ''}}</text>
						<text class="mobile">{{addressData.tel || ''}}</text>
					</view>
					<text class="address" v-if="addressData">{{addressData.province_name || ''}} {{addressData.city_name || ''}} {{addressData.county_name || ''}}
						{{addressData.address || ''}}</text>
				</view>
				<text class="iconfont icon-jiantouarrow487"></text>
			</view>

			<image class="a-bg" src="/static/img/line.png"></image>
		</view>

		<view class="goods-section">
			<view class="g-header b-b">
				<image class="logo" :src="this.util.get_img_url(gConfig.home_site_logo_wap)"></image>
				<text class="name">{{gConfig.home_site_name}}</text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item" v-for="(item,index) in goodsList" :key="index">
				<image :src="item.images"></image>
				<view class="right">
					<text class="title ellipsis">{{item.title}}</text>
					<view class="spec">
						规格：<text v-for="(sItem,sIndex) in item.spec" :key="sIndex">{{sItem.value}}</text>
					</view>
					<view class="price-box">
						<text class="price">￥{{item.price}}</text>
						<text class="number">x {{item.stock}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 优惠明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b" @click="payShow('show')">
				<view class="cell-icon">
					付
				</view>
				<text class="cell-tit clamp">选择支付方式</text>
				<text class="cell-tip active">
					{{paySelected.name||''}}
				</text>
				<text class="iconfont icon-jiantouarrow487"></text>
			</view>
			<view class="yt-list-cell b-b" @click="expressShow('show')">
				<view class="cell-icon hb">
					送
				</view>
				<text class="cell-tit clamp">选择快递</text>
				<text class="cell-tip active">
					{{expressSelected.name||''}}
				</text>
				<text class="iconfont icon-jiantouarrow487"></text>
			</view>
			<view class="yt-list-cell b-b" @click="toggleMask('show')">
				<view class="cell-icon">
					券
				</view>
				<text class="cell-tit clamp">优惠券(功能暂不可用)</text>
				<text class="cell-tip active">
					选择优惠券
				</text>
				<text class="iconfont icon-jiantouarrow487"></text>
			</view>
			<view class="yt-list-cell b-b">
				<view class="cell-icon hb">
					减
				</view>
				<text class="cell-tit clamp">商家促销</text>
				<text class="cell-tip disabled">暂无可用优惠</text>
			</view>
			
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip">￥{{cartBase.total_price}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">优惠金额</text>
				<text class="cell-tip red">-￥{{cartBase.preferential_price}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip" v-if="fee==0">免运费</text>
				<text class="cell-tip" v-else>+￥{{fee}}</text>
			</view>
			<view class="yt-list-cell desc-cell">
				<text class="cell-tit clamp">备注</text>
				<input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				<text class="price">{{cartBase.actual_price}}</text>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view>

		<!-- 优惠券面板 -->
		<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content" @click.stop.prevent="stopPrevent">
				<view class="coupon-item" v-for="(item,index) in couponList" :key="index">
					<view class="con">
						<view class="left">
							<text class="title">{{item.title}}</text>
							<text class="time">有效期至2019-06-30</text>
						</view>
						<view class="right">
							<text class="price">{{item.price}}</text>
							<text>满30可用</text>
						</view>

						<view class="circle l"></view>
						<view class="circle r"></view>
					</view>
					<text class="tips">限新用户使用</text>
				</view>
			</view>
		</view>
		<!-- 支付方式面板 -->
		<view class="pay" :class="payState===0 ? 'none' : payState===1 ? 'show' : ''" @click="payShow">
			<view class="pay-content" @click.stop.prevent="stopPrevent">
				<view class="pay-item" v-for="(item,index) in payList" :key="index" @tap="selectedPay(item)">
					<image :src="item.logo" class="img"></image>
					<view class="txt">{{item.name || ''}}</view>
				</view>
			</view>
		</view>
		<!-- 快递选择面板 -->
		<view class="express" :class="expressState===0 ? 'none' : expressState===1 ? 'show' : ''" @click="expressShow">
			<view class="express-content" @click.stop.prevent="stopPrevent">
				<view class="express-item" v-for="(item,index) in expressList" :key="index" @tap="selectedExpress(item)">
					{{item.name}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				gConfig: [],
				cartParam: [], //接收的参数
				goodsList: [], //商品列表
				payList: [], //支付列表
				payState: 0, //支付面板显示状态
				paySelected: {
					id:0      //选中的支付方式，默认为0，如果不选支付方式会报错
				},
				expressList:[],//快递列表
				expressState:0,//快递面板显示状态
				expressSelected:{}, //选中的快递
				cartBase: [], //购物车基本信息
				maskState: 0, //优惠券面板显示状态
				fee:0, //运费数据
				desc: '', //备注
				payType: 1, //1微信 2支付宝
				couponList: [{
						title: '新用户专享优惠券',
						price: 5,
					},
					{
						title: '庆五一发一波优惠券',
						price: 10,
					},
					{
						title: '优惠券优惠券优惠券优惠券',
						price: 15,
					}
				],
				addressData: [],
				checkedAddress: [],
				orderParam: []
			}
		},
		onLoad(params) {
			
			this.gConfig = uni.getStorageSync('gConfig');
			// 选择收货地址
			// 这里做个判断，如果从购物车进入这个页面，这时还没有进行选择收货地址的操作，那么this.checkedAddress为空，自动选择默认的收货地址。
			//如果进行了，地址的选择操作，那么 就给this.checkedAddress赋值选择的收货地址,且把选择的收货地址存入缓存。以便在进行其他的页面切换操作时，当前数据不丢失。如：选择快递操作。
			if(this.checkedAddress.length<=0){
				if (params.hasOwnProperty('checkedAddress')) {
					this.checkedAddress = JSON.parse(params.checkedAddress);
				}
			}
			
			//商品数据,这里做个判断，把从购物车那穿过来的数据做个缓存处理，这样，在地址管理页面，选择地址时，在调回当前页面，商品数据不丢失。
			// let data=uni.getStorageSync('goodsData');
			// if (data.length<=0) {
			// 	data = JSON.parse(params.data);
			// 	uni.setStorageSync('goodsData', data);
			// }
			this.cartParam = JSON.parse(params.goodsData);
	
		},
		onShow() {
			let self = this;
			// 获取购物车数据
			let createOrderUrl = this.requestUrl.createOrder;
			let params = {
				data: this.cartParam.goodsData
			};
			this.util.request(createOrderUrl, 'post', function(res) {
				if (res.data.code == 0 && res.data.data) {
					self.goodsList = res.data.data.goods_list; //商品列表
					self.payList = res.data.data.payment_list; //支付方式列表
					self.cartBase = res.data.data.base; //购物车基本数据
					self.expressList=res.data.data.express_list; //快递列表
					self.feeDataHandle(res.data.data.fee_data); //处理运费数据
					
					// 设置地址数据，如果从购物车进入这个页面，那么没有进行选择地址的操作，checkedAddress为空，addressData,用请求出来的默认地址数据，
					// 如果进行了选择地址，那么checkedAddress里边存了选择好的，地址数据，这是addressData,就用选择的地址数据
					if (self.checkedAddress.length<=0) {
						self.addressData = self.cartBase.address;
					} else{
						self.addressData=self.checkedAddress;
					}

				}
			}, params)
		},
		methods: {
			// 跳转到地址管理页面
			navToAddress(){
				uni.navigateTo({
					url:`/pages/address/addressManage?goodsData=${JSON.stringify(this.cartParam)}`
				})
			},
			//显示优惠券面板
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer)
			},
			//显示支付面板
			payShow(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.payState = 2;
				setTimeout(() => {
					this.payState = state;
				}, timer)
			},
			// 选择支付方式
			selectedPay(e) {
				this.paySelected = e;
			},
			//显示快递面板
			expressShow(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.expressState = 2;
				setTimeout(() => {
					this.expressState = state;
				}, timer)
			},
			// 选择快递
			selectedExpress(e) {
				this.expressSelected = e;
			},
			// 处理运费数据
			feeDataHandle(e){
				// 订单里的商品数据，如果有一个商品是免运费的，就应该都免运费
				// 先判断商品id是否在免运费的商品列表里
				for (let index in this.goodsList) {
					// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。
					
					if(e.goods_ids.indexOf(this.goodsList[index].goods_id) !=-1){
					
						// 此时说明 有商品免运费
						this.fee=0;
					}else if(this.cartBase.total_price>=e.data[0].free_shipping_price){
												
						// 判断满减
						this.fee=0;
					}else{
						// 一件的运费
						this.fee=parseFloat(e.data[0].first_price);

					}
				}
				// 只有在运费 不满足免运费的情况下，才往下进行 增加件数，增加运费的计算
				if(this.fee>0){
					// 增加几件，付多少运费
					let x=parseInt(e.data[0].first); //开单运费的件数
					let y=parseInt(e.data[0].continue); //增加的件数，增加几件，在增加运费。
					let z=parseFloat(e.data[0].continue_price); //每增加 y件，要多支付的运费z.
					if(y>0 && z>0){
						let n=Math.ceil((this.goodsList.length-x)/y);
						this.fee=this.fee+n*z;
					}
				}
				
			},

			submit() {
				let self=this;
				// 把选中的快递方式，跟备注拼接起来，作为备注，提交订单
				let user_note='';
				if(this.expressSelected){
					let user_note=this.expressSelected.name + ' ' + this.desc;
				}
				if(!this.addressData){
					uni.showToast({
						title:'没有选择地址',
						image: '/static/icon/error.png',
						duration:1500
					})
					return;
				}
				
				let orderParam = {
					data: {
						address_id: this.addressData.id, //选择的地址id
						payment_id: this.paySelected.id, //支付方式的id
						user_note: user_note, //备注
						buy_type: this.cartParam.goodsData.buy_type, //创建订单类型，cart或goods
						// ids这个参数，是从购物车到这个页面，需要的数据
						ids: this.cartParam.goodsData.ids ,//购物车id
						// 下边三个参数，是从商品页面直接点击购买到这个页面，需要的数据
						goods_id:this.cartParam.goodsData.goods_id,//商品id
						stock:this.cartParam.goodsData.stock, //商品的数量
						spec:this.cartParam.goodsData.spec //商品选择的规格
					}
				}
				let addOrderUrl = this.requestUrl.addOrder;
				this.util.request(addOrderUrl, 'post', function(res) {
					if (res.data.code == 0 && res.data.data) {
						let orderId = res.data.data.order.id;
						uni.redirectTo({
							url: `/pages/pay/pay?id=${orderId}&payment_id=${self.paySelected.id}&payment=${self.paySelected.payment}`
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							image: '/static/icon/error.png',
							duration: 1500
						});
					}
				}, orderParam);

			},
			stopPrevent() {}
		},
		watch:{
			
		}
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;
		padding-bottom: 100upx;
	}

	.address-section {
		padding: 30upx 0;
		background: $uni-bg-color;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-dizhi3 {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $uni-text-color;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $uni-text-color-grey;
		}

		.icon-jiantouarrow487 {
			font-size: 40upx;
			color: $uni-text-color-grey;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}

	.goods-section {
		margin-top: 16upx;
		background: #FFFFFF;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $uni-font-size-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}

			.right {
				padding-left: 24upx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}

			.title {
				font-size: 30upx;
				color: $uni-text-color;
			}

			.spec {
				font-size: 26upx;
				color: $uni-text-color-grey;
				margin-top: 10rpx;

				text {
					margin-right: 20rpx;
				}
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $uni-text-color;
				padding-top: 10upx;

				.price {
					margin-bottom: 4upx;
				}

				.number {
					font-size: 26upx;
					color: $uni-text-color;
					margin-left: 20upx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $uni-text-color;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $uni-text-color-grey;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $uni-text-color;

			&.disabled {
				color: $uni-text-color-disable;
			}

			&.active {
				color: $uni-text-color-zhu;
			}

			&.red {
				color: $uni-text-color-zhu;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $uni-font-size-base;
			color: $uni-text-color-zhu;
		}
	}


	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $uni-text-color;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

		.price-content {
			padding-left: 30upx;
		}

		.price-tip {
			color: $uni-text-color-zhu;
			margin-left: 8upx;
		}

		.price {
			font-size: 36upx;
			color: $uni-text-color-zhu;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
			background-color: $uni-bg-color-zhu;
		}
	}

	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;

		.mask-content {
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y: scroll;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;

		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}

		.title {
			font-size: 32upx;
			color: $uni-text-color;
			margin-bottom: 10upx;
		}

		.time {
			font-size: 24upx;
			color: $uni-text-color-grey;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $uni-text-color;
			height: 100upx;
		}

		.price {
			font-size: 44upx;
			color: $uni-text-color-zhu;

			&:before {
				content: '￥';
				font-size: 34upx;
			}
		}

		.tips {
			font-size: 24upx;
			color: $uni-text-color-grey;
			line-height: 60upx;
			padding-left: 30upx;
		}

		.circle {
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;

			&.r {
				left: auto;
				right: -6upx;
			}
		}
	}

	// 支付面板
	.pay {
		display: flex;
		align-items: flex-end;
		position: fixed;
		top: var(--window-top);
		left: 0;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;

		.pay-content {
			width: 100%;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y: scroll;
			flex-direction: row;
			justify-content: space-around;
			display: flex;
			padding: 30rpx 30rpx 50rpx
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.pay-content {
				transform: translateY(0);
			}
		}

		.pay-item {
			width: 190rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #FFFFFF;
			padding: 20rpx 0
		}

		.pay-item .img {
			width: 100rpx;
			height: 100rpx;
		}

		.pay-item .txt {
			color: #555555;
			font-size: 26rpx;
		}
	}
	// 快递选择面板
	.express {
		display: flex;
		align-items: flex-end;
		position: fixed;
		top: var(--window-top);
		left: 0;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;
	
		.express-content {
			width: 100%;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y: scroll;
			padding: 30rpx 30rpx 50rpx
		}
	
		&.none {
			display: none;
		}
	
		&.show {
			background: rgba(0, 0, 0, .4);
	
			.express-content {
				transform: translateY(0);
			}
		}
	
		.express-item {
			width: 30%;
			background: #FFFFFF;
			box-sizing: border-box;
			font-size:28rpx;
			float: left;
			margin:0 1%;
			text-align: center;
			padding:15rpx 0;
			margin-bottom: 20rpx;
		}

	}
</style>
